<template>
  <view class="container">
    <view class="fansitem" v-for="(item, index) in fanslist" :key="item.id">
      <view class="left">
        <image :src="item.to_user_info.avatar" mode="aspectFill"></image>
        <view style="margin-left: 30rpx">{{ item.to_user_info.nickname }}</view>
        <image
          :src="item.to_user_info.gender == 0 ? 'https://qn.boruichengyi.com/static/index/icon/gendernv.png' : 'https://qn.boruichengyi.com/static/index/icon/gendernan.png'"
          mode=""
          style="width: 40rpx; height: 40rpx; margin-left: 20rpx"
        ></image>
        <view>{{ item.to_user_info.age }}</view>
      </view>
      <view class="isfans" @click="fn(item.to_user_info.id)">已关注</view>
    </view>
    <!-- 取消关注 -->
    <uni-popup ref="cancel" type="center">
      <view class="box">
        <view class="title">提示</view>
        <view class="content">确定要取消关注吗？</view>
        <view class="btn">
          <view class="okbtn" @click="cancelfollow">确认</view>
          <view class="cancelbtn" @click="$refs.cancel.close()">取消</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 初始化粉丝列表
    this.getfnaslist();
  },
  data() {
    return {
      fanslist: [],
      currentid: ''
    };
  },
  methods: {
    fn(id) {
      this.currentid = id;
      this.$refs.cancel.open();
    },
    // 获取粉丝列表
    async getfnaslist() {
      const res = await uni.$http.post('user/getMyFansList');
      console.log(res);
      this.fanslist = res.data.data;
    },
    // 确认取消关注
    async cancelfollow() {
      // 调取取消接口
      console.log(this.currentid);
      const res = await uni.$http.post('user/operaUser', {
        to_user_id: this.currentid
      });
      console.log(res);
      if (res.data.code == 1) {
        this.$refs.cancel.close();
        this.getfnaslist();
      } else {
        this.$refs.cancel.close();
        return uni.showToast({
          title: '取消关注失败，请检查网络',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .fansitem {
    box-sizing: border-box;
    height: 100rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 0;

    .left {
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        vertical-align: middle;
        border-radius: 50%;
      }
    }
    .isfans {
      width: 130rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      color: #fff;
      background-color: #bbbbbb;
    }
  }
  .box {
    box-sizing: border-box;
    width: 650rpx;
    height: 400rpx;
    padding-top: 30rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    .title {
      font-size: 30rpx;
      font-weight: 700;
      text-align: center;
    }
    .content {
      text-align: center;
      margin: 80rpx 0;
    }
    .btn {
      display: flex;
      justify-content: space-evenly;
      .okbtn {
        width: 300rpx;
        height: 90rpx;
        color: #fff;
        text-align: center;
        line-height: 90rpx;
        background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
      }
      .cancelbtn {
        width: 280rpx;
        height: 90rpx;

        text-align: center;
        line-height: 90rpx;
        background: #f1f1f1;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
    }
  }
}
</style>
